<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bean.Login,bean.selectPrice" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font.css">
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.btn-outline-purple {
    color: #9c7157;
    border-color: #9c7157;
  }
  .btn-outline-purple:hover ,
  .btn-outline-purple.active,
  .btn-purple
  {
    color: #fff;
    background-color: #9c7157;
    border-color: #9c7157;
  }
  .btn-purple:hover{
    background-color: #9c7157;
      color: #fff;
      justify-content: right;
  }
  .bg-purple{
    background-color: #9c7157;
  }
  .submit{
  	font-size:20px;
  }
  .w-45 {
  	width: 45% !important;
  }
</style>
<script>
	function checkUser(){
		var user=document.getElementById("user").value;
		var s_user=document.getElementById("s_user");
		var exp=/^[a-zA-Z][a-zA-Z0-9]*$/;
		if(user.length==0){
			s_user.innerHTML='请输入用户名';
			return false;
		}
		if(!exp.test(user)){
			s_user.innerHTML='用户名格式错误';
			return false;
		}
		if(user.length>5){
			s_user.innerHTML='用户名长度0-5';
			return false;
		}
		s_user.innerHTML='';
		return true;
	}
	function checkPwd(){
		var s_pwd=document.getElementById("s_pwd");
		var pwd=document.getElementById("pwd").value;
		if(pwd.length<6){
			s_pwd.innerHTML='请输入6-10位密码';
			return false;
		}else if(pwd.length>10){
			s_pwd.innerHTML='请输入6-10位密码';
			return false;
		}else{
			s_pwd.innerHTML='';
			return true;
		}
	}
	function checkUser1(){
		var username=document.getElementById("username").value;
		var s_user1=document.getElementById("s_user1");
		var exp=/^[a-zA-Z][a-zA-Z0-9]*$/;
		if(username.length==0){
			s_user1.innerHTML='请输入用户名';
			return false;
		}
		if(!exp.test(username)){
			s_user1.innerHTML='用户名格式错误';
			return false;
		}
		if(username.length>5){
			s_user1.innerHTML='用户名长度0-5';
			return false;
		}
		s_user1.innerHTML='';
		return true;
	}
	function checkPwd1(){
		var s_pwd1=document.getElementById("s_pwd1");
		var password=document.getElementById("password").value;
		if(password.length<6){
			s_pwd1.innerHTML='请输入6-10位密码';
			return false;
		}else if(password.length>10){
			s_pwd1.innerHTML='请输入6-10位密码';
			return false;
		}else{
			s_pwd1.innerHTML='';
			return true;
		}
	}
	function checkQrPwd1(){
		var password=document.getElementById("password").value;
		var password2=document.getElementById("password2").value;
		var s_pwd2=document.getElementById("s_pwd2");
		if(password!=password2){
			s_pwd2.innerHTML='密码不一致';
			return false;
		}else{
			s_pwd2.innerHTML='';
			return true;
		}
		
	}
	function checkCellphone1(){
		var cellphone=document.getElementById("cellphone").value;
		var cell=document.getElementById("cell");
		var exp=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if(!exp.test(cellphone)){
			cell.innerHTML='手机号错误';
			return false;
		}else{
			cell.innerHTML='';
			return true;
		}
	}
	function judge1(){
		if(checkUser1()==true && checkPwd1()==true && checkQrPwd1()==true && checkCellphone1()==true){
			return true;
		}
		return false;
	}
	function judge(){
		if(checkUser()==true && checkPwd()==true){
			return true;
		}
		return false;
	}
</script>
</head>
<body>
	<%
	response.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
	response.setCharacterEncoding("UTF-8");
	String user=(String)session.getAttribute("user");
	String pwd=(String)session.getAttribute("pwd");
	String admin=(String)session.getAttribute("admin");
	String adminpwd=(String)session.getAttribute("adminpwd");
	String userId=(String)session.getAttribute("xxx");
	%>
	
    <!-- 头部开始 -->
    <header>
        <div class="header-content">
            <!-- left start -->
            <div class="logo" style="margin-top:14px;">
                甜甜甜
            </div>
            <!-- left end -->
            <!-- center start -->
            <div class="center">
                <div class="search">
                    <form action="" method="GET" action="">
                        <input type="text" placeholder="TIANPING" name="">
                        <button class="icon-search"></button>
                    </form>
                </div>
          <%
           	if(adminpwd!=null && adminpwd.length()!=0 && admin!=null && admin.length()!=0){
          %>
          		<div class="menu">
                    <ul>
                        <li><a href="login.jsp">首页</a></li>
                        <li><a href="adminProduct.jsp">餐品修改</a></li>
                        <li><a href="adminUser.jsp">用户管理</a></li>
                        <li><a href="adminOrder.jsp">订单管理</a></li>
                    </ul>
                </div>
          <%}else{ %>
                <div class="menu">
                    <ul>
                        <li><a href="login.jsp">首页</a></li>
                        <li><a href="shop.jsp">商品购买</a></li>
                        <li><a href="#">线下活动</a></li>
                        <li><a href="submitPage.jsp">订单</a></li>
                    </ul>
                </div>
           <%} %>
            </div>
            <!-- center end -->
            <!-- right start -->
            
            <div class="right" style="width:200px;position:relative">
               		<div class="user" style="display:flex;position:absolute;right:0;top:5px;">
                <%
               		request.setCharacterEncoding("UTF-8");
                	if(pwd!=null && pwd.length()!=0 && user!=null && user.length()!=0){
                %>
                	<div style="color:white;font-size:22px;text-align:center;margin-left:30px"><span style="font-size:20px;">普通用户:</span><%=user%></div>
                	<div style="position:absolute;right:-90px;top:10px;">
                		<div style="margin-left:14px"><button type="button" class=" btn btn-light" data-bs-target="#modifylogin" data-bs-toggle="modal">修改</button></div>
                		<div style="margin-left:14px;margin-top:5px;"><button type="button" class=" btn btn-secondary" data-bs-target="#outlogin" data-bs-toggle="modal">退出</button></div>
                   </div>
               		
                 	</div>
               	   <div class="cart" style="margin-top:68px;">
                    <a href="cart.jsp"><i class="icon-bag" style="background:#735a4f;"></i></a>
                    <div class="price">
                        &yen;
                        <%
                        if(userId!=null | userId.length()!=0){
                        	int id=Integer.valueOf(userId);
                       	    out.print(selectPrice.select(id));
                        }
                        %>
                    </div>
                    <div class="num"> 
                    	 <%
                    	 if(userId!=null | userId.length()!=0){
                    		int id=Integer.valueOf(userId);
                      		out.print(selectPrice.num(id));
                    	 }
                         %>
                    </div>
                    <!-- right end -->
                </div>
                <%
                	}else if(adminpwd!=null && adminpwd.length()!=0 && admin!=null && admin.length()!=0){
            	%>		
            	<div style="margin-left:45px;">
            	<div style="color:white;font-size:22px;text-align:center;margin-top:14px">管理员：<%=admin%></div>
            	<div style="margin-top:5px;margin-left:40px">
            		<button type="button" class=" btn btn-secondary" data-bs-target="#outlogin" data-bs-toggle="modal">退出</button>
            	</div>
            	</div>
            	<%
                	}else{
            	%>	
            	    </div>
                    <button type="button" style="border:none;background:#9c7157;color:white;margin-left:90px;margin-top:14px" data-bs-target="#login"
                        data-bs-toggle="modal">登录</button>
                    <button type="button" style="border:none;background:#9c7157;color:white;" data-bs-target="#register"
                        data-bs-toggle="modal">注册</button>
                    <div class="cart" style="margin-top:20px;">
                      <a href="cart.jsp"><i class="icon-bag" style="background:#735a4f;"></i></a>
                      <div class="price">
                        &yen;0
                       </div>
                   <!-- <div class="num"> 2 </div>-->
                    <!-- right end -->
                   </div>
                <%
                    }
                %>
                	
            </div>
    </header>
 <!-- 登录开始 -->
        <div class=" modal" tabindex="-1" id="login" data-bs-backdrop="static" data-bs-keyboard="true">
            <div class=" modal-dialog modal-dialog-centered">
                <div class=" modal-content">
                    <div class=" modal-header">
                        <h4 class=" modal-title">登录</h4>
                        <button type="button" class=" btn btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class=" modal-body">
                        <div class=" w-75 mx-auto">
                            <form action="loginUser" method="POST" onsubmit="return judge()">
                                <div class="my-3">
                                    <label for="user" class="form-label" onblur="checkUser()">用户名</label>
                                    <input type="text" name="user" id="user" class="form-control">
                                    <span id="s_user" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3">
                                    <label for="pwd" class="form-label" onblur="checkPwd()">密码</label>
                                    <input type="password" name="pwd" id="pwd" class="form-control">
                                    <span id="s_pwd" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3 text-center">
                                    <button type="submit" class="btn btn-purple w-100">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class=" modal-footer">
                        <button type="button" class=" btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class=" btn btn-purple">保存</button>
                    </div>
                </div>
            </div>
        </div>
    <!-- 登录结束 -->
     <!-- 退出登录开始 -->
        <div class=" modal" tabindex="-1" id="outlogin" data-bs-backdrop="static" data-bs-keyboard="true">
            <div class=" modal-dialog modal-dialog-centered">
                <div class=" modal-content">
                    <div class=" modal-header">
                        <h4 class=" modal-title">退出登录</h4>
                        <button type="button" class=" btn btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class=" modal-body">
                        <div class=" w-75 mx-auto">
                            <form action="outLogin" method="POST" >
                            	<div style="display:flex;justify-content: space-between;">
	                       			 <button type="submit" class=" btn btn-purple w-45">确认退出</button>
	                       			 <button type="button" class=" btn btn-secondary w-45" data-bs-dismiss="modal">关闭</button>
                       			 </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- 退出登录结束 -->
    <!-- 修改资料开始 -->
        <div class=" modal" tabindex="-1" id="modifylogin" data-bs-backdrop="static" data-bs-keyboard="true">
            <div class=" modal-dialog modal-dialog-centered">
                <div class=" modal-content">
                    <div class=" modal-header">
                        <h4 class=" modal-title">编辑资料</h4>
                        <button type="button" class=" btn btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class=" modal-body">
                        <div class=" w-75 mx-auto">
                            <form action="modifyLogin" method="POST" onsubmit="">
                                <div class="my-3">
                                    <label for="user" class="form-label" onblur="">用户名</label>
                                    <input type="text" name="usert" id="user2" class="form-control" value="${userTotal.getName()}">
                                    <span id="s_user2" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3">
                                    <label for="pwd" class="form-label" onblur="">密码</label>
                                    <input type="password" name="pwdt" id="pwd2" class="form-control" value="${userTotal.getPassword()}" placeholder="请确认输入密码">
                                    <span id="s_pwd2" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3">
                                    <label for="pwd2" class="form-label">确认密码</label>
                                    <input type="password" name="pwd2t" id="pwdt" class="form-control" value="${userTotal.getPassword()}" onblur="">
                                	<span id="s_pwd2" style="color:red;font-size:10px" ></span>
                                </div>
                                <div class="my-3">
                                    <label for="tel1" class="form-label">联系电话</label>
                                    <input type="text" name="cellphonet" id="cellphone2" class="form-control" value="${userTotal.getPhone()}" onblur="">
                                    <span id="cell2" style="color:red;font-size:10px" ></span>
                                </div>
                                <div class="my-3">
                                    <label for="add1" class="form-label">地址</label>
                                    <input type="text" name="addresst" id="add2" class="form-control" value="${userTotal.getAddress()}">
                                </div>
                                 <div class="my-3 text-center">
                                    <button type="submit" class="btn btn-purple w-100">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class=" modal-footer">
                        <button type="button" class=" btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class=" btn btn-purple">保存</button>
                    </div>
                </div>
            </div>
        </div>
    <!-- 修改资料结束 -->
    <!-- 注册开始 -->
        <div class=" modal" tabindex="-1" id="register" data-bs-backdrop="static" data-bs-keyboard="true">
            <div class=" modal-dialog modal-dialog-centered">
                <div class=" modal-content">
                    <div class=" modal-header">
                        <h4 class=" modal-title">注册</h4>
                        <button type="button" class=" btn btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class=" modal-body">
                        <div class=" w-75 mx-auto">
                            <form action="registerUser" method="POST" onsubmit="return judge1()">
                                <div class="my-3">
                                    <label for="user1" class="form-label">用户名</label>
                                    <input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名（英文字符或数字）" onblur="checkUser1()">
                                    <span id="s_user1" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3">
                                    <label for="pwd1" class="form-label">密码</label>
                                    <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码（长度在6-10位之间）"  onblur="checkPwd1()">
                               	    <span id="s_pwd1" style="color:red;font-size:10px"></span>
                                </div>
                                <div class="my-3">
                                    <label for="pwd2" class="form-label">确认密码</label>
                                    <input type="password" name="password2" id="password2" class="form-control" placeholder="请确认输入密码"  onblur="checkQrPwd1()">
                                	<span id="s_pwd2" style="color:red;font-size:10px" ></span>
                                </div>
                                <div class="my-3">
                                    <label for="tel1" class="form-label">联系电话</label>
                                    <input type="text" name="cellphone" id="cellphone" class="form-control" onblur="checkCellphone1()">
                                    <span id="cell" style="color:red;font-size:10px" ></span>
                                </div>
                                <div class="my-3">
                                    <label for="add1" class="form-label">地址</label>
                                    <input type="text" name="address" id="address" class="form-control">
                                </div>
                                <div class="my-3 text-center">
                                    <button type="submit" class="btn btn-purple w-100">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class=" modal-footer">
                        <button type="button" class=" btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class=" btn btn-purple">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 注册结束 -->
    <!-- 头部结束 -->
    <!-- 广告开始 -->
    
    <div class="banner">
    	<img src="images/carousel/4.jpg" style="width:100%;height:650px;margin-top:120px;">
    </div>
    <!-- 广告结束 -->
    <!-- 特色产品开始 -->
    <div class="special">
        <div class="content">
            <!-- one start -->
            <div class="one">
                <div class="item">
                    <a href="#"><img src="images/carousel/5.jpg" style="width:100%" alt=""></a>
                </div>
                <div class="item">
                    <a href="#"><img src="images/carousel/6.png" style="width:100%" alt=""></a>
                </div>
            </div>
            <!-- one end -->
            <!-- two start -->
            <div class="two">
                <div>
                    <a href="#"><img src="images/f05.png" alt=""></a>
                    <div class="more">
                        <a href="#">了解更多</a>
                    </div>
                </div>
                <div>
                    <a href="#"><img src="images/f03_1.png" alt=""></a>
                    <a href="#"><img src="images/f03_2.png" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="images/f04.png" alt=""></a>
                </div>
            </div>
            <!-- two end -->
        </div>
    </div>
    <!-- 特色产品结束 -->
    
    
    <!-- 新品推荐开始 -->
    <div class="newProduct">
        <div class="top">
            <div class="title">
                新品推荐
            </div>
            <ul>
                <li><a href="">全部</a></li>
                <li><a href="">甜品</a></li>
                <li><a href="">咖啡</a></li>
                <li><a href="">饮品</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="item">
                <img src="images/甜品/奥利奥毛巾卷.png" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">奥利奥毛巾卷</div>
                <div>￥26</div>
                <div class="icomoon icon-cart cart"></div>
            </div>
            <div class="item">
                <img src="images/甜品/抹茶千层.png" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">抹茶千层</div>
                <div>￥32</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/甜品/巧克力巴斯克.png" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">巧克力巴斯克</div>
                <div>￥28</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/甜品/芒果泡芙.png" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">芒果泡芙</div>
                <div>￥18</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/甜品/焦糖布丁.jpeg" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">焦糖布丁</div>
                <div>￥20</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/饮品/百香果柠檬茶.png" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">百香果柠檬茶</div>
                <div>￥16</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/咖啡/抹茶拿铁.jpg" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">抹茶拿铁</div>
                <div>￥22</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
            <div class="item">
                <img src="images/咖啡/焦糖玛奇朵.jpg" alt="">
                <div style="margin-top:15px;font-size:16px;font-weight:bold;'">焦糖玛奇朵</div>
                <div>￥23</div>
                <div class="icomoon icon-cart cart" ></div>
            </div>
        </div>
    </div>
    <!-- 新品推荐结束 -->


  
    <!-- 底部开始 -->
    <footer>
        <div class="foot">
            <div class="content">
                <dl>
                    <dt>甜甜甜VIP</dt>
                    <dd><a href="#">甜甜甜会员中心</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">配送时间</a></dd>
                    <dd><a href="#">配送范围</a></dd>
                    <dd><a href="#">配送收费方式</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">微信支付</a></dd>
                    <dd><a href="#">支付宝支付</a></dd>
                    <dd><a href="#">优惠券使用</a></dd>
                    <dd><a href="#">礼品券使用</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">退换货流程及退款</a></dd>
                    <dd><a href="#">订单修改及发票</a></dd>
                    <dd><a href="#">客服联系方式</a></dd>
                    <dd><a href="#">订购说明</a></dd>
                </dl>
            </div>

            <div class="worktime">
                任何问题，联系在线客服。工作时间：周一至周五9:00-21:00：周六，周日：10:00-18:00，法定节假日休息
            </div>
        </div>

    </footer>
    <div class="copyright">
        &copy; copyrights TTT. ALL rights researved 2024.
    </div>
    <!-- 底部结束-->

</body>

</html>